{% extends "bootstrap/base.html" %}
{% block title %}whenmgone{% endblock %}

{% block head %}
{{ super() }}
<!-- ico -->
<link rel="shortcut icon" href="{{ url_for('static',filename = 'ghost_ico.ico') }}" type="image/x-icon">
<!-- cdn css -->
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet">
<!-- self css -->
<link rel="stylesheet" href="{{ url_for('static', filename = 'login.css') }}">

{% endblock %}

{% block content %}
<!-- navbar -->
<nav class="navbar container">
    <a href="/login"><h1>whenmgone</h1></a> 
</nav>

<!-- 巨幕 -->
<div class="container jumbotron">



    <div class="row">
    <!-- 首页图片栏 -->
      <div class="col-xs-12 col-md-6 col-md-offset-1">
          <img class='index-img' src="http://i4.tietuku.com/47af26ec40838e59.png" alt="testimg.png" title="testimg.png" />         
      </div>
      <!-- 登录栏 -->
      <div class="col-xs-12 col-md-3 col-md-offset-1">
        <div class="login">
            <form action="/login" method="POST">
              <div class="form-group">
                {{ form.email_address(class="form-control",id="inputEmail",placeholder="邮箱") }}
              </div>
              <div class="form-group">
                {{ form.password(class="form-control",id="inputPassword",placeholder="密码") }}
              </div>
              {{ form.submit(class="btn btn-default") }}
              <a class="btn btn-default" href="/register" role="button">注册</a>
              {% if message %} {{ message }} {% endif %}
            </form>
        </div>
      </div>
    </div>
</div>

<!-- 快速使用说明 -->
<div class="container help">
      <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="row">
      <div class="col-xs-12 col-md-4">
          <img src="http://i4.tietuku.com/a2f52d14ccd458a0.png" alt="testimg.png" title="testimg.png" />
        <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit</p>
        </div>

      </div>
      <div class="col-xs-12 col-md-4">
          <img src="http://i4.tietuku.com/a2f52d14ccd458a0.png" alt="testimg.png" title="testimg.png" />
        <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit</p>
        </div>
      </div>
      <div class="col-xs-12 col-md-4">
          <img src="http://i4.tietuku.com/a2f52d14ccd458a0.png" alt="testimg.png" title="testimg.png" />
        <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit</p>
        </div>

      </div>
    </div>
</div>


<!-- footer -->
<footer class="footer">
    <div class="container">
    <hr>
        <p>Copyright © whenmgone 2015</p>
    </div>
</footer>

<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.js"></script>

{% endblock %}